<template>
  <div class="banner-card__wrap">
    <div class="banner-card" v-if="bannerType===1">
      <a :href="linkArr[currentImg]" target="_blank" style="width:100%;height:100%">
        <img class="banner-card__img"  :src="imgArr[currentImg]" :style="{opacity:imgOpacity}" alt="" >

      </a>

      <div class="banner-card__left-arrow" @click="clickToGetPrePic">
        <p>
          <yun-icon name="left_arrow" color="#fff"></yun-icon>
        </p>
      </div>
      <div class="banner-card__right-arrow" @click="clickToGetNextPic">
        <yun-icon name="left_arrow" color="#fff"></yun-icon>
      </div>
      <div class="banner-card__progress">
        <p v-for=" (val,index) in imgArr" @click="clickToPointPic(index)" :class="index===currentImg?'banner-card__progress-dot':''"></p>
      </div>
    </div>
    <div class="banner-card2" v-if="bannerType===2">
      <div class="banner-card2__bigImg">
        <img   :src="imgArr[currentImg]"  alt="" >
        <div class="banner-card__left-arrow" @click="clickToGetPrePic">
          <p>
            <yun-icon name="left_arrow" color="#fff"></yun-icon>
          </p>
        </div>
        <div class="banner-card__right-arrow" @click="clickToGetNextPic">
          <yun-icon name="left_arrow" color="#fff"></yun-icon>
        </div>
      </div>
      <div class="banner-card2__longBox" style="white-space:normal">
        <div :class="index===currentImg?'banner-card2__littleImg--active':'banner-card2__littleImg'" :style="(index+1)%9===0?{marginRight:0}:{}" v-for=" (val,index) in imgArr"  @click="clickToPointPic(index)" >
          <img   :src="imgArr[index]"  alt="" >
          <!--<p v-if="!showAllImg&&(index+1)%9===0" @click="clickToShowAllImg" class="hideImgNum">+{{hideImgNum}}</p>-->
        </div>
      </div>
    </div>
  </div>
</template>


<script>
  export default {
    name:'banner',
    props:{
      imgArr:{
        default:[],
        type: Array
      },
      linkArr:{
        default:[],
        type: Array
      },
      playTime:{
        default:3000,
        type: Number
      },
      bannerType:{
        default:1,
        type: Number
      },
      autoPlay:{
        default:true,
        type: Boolean
      },
      currentImg2:{
        default:0,
        type: Number
      },
    },

    data(){
      return{
        imgSrc:'',
        imgOpacity:1,
        opacityTime:500,
        bannerTimer:null,
        card2ImgArr:[],
        hideImgNum:0,
        currentImg:0,
        showAllImg:false,
      }
    },

    watch:{
      currentImg2(pev,now){
        this.currentImg = this.currentImg2;
      }
    },

    mounted(){
      this.currentImg = this.currentImg2;
      this.initBanner();
      this.stateChangeCard2ImgArr();
    },



    methods:{

      //初始化轮播图
      initBanner(){
        clearInterval(this.bannerTimer)

        if(this.autoPlay){
          this.bannerTimer = setInterval(()=>{
            let {imgArr,currentImg}  = this;
            let length = imgArr.length;
            if(currentImg<length-1){
              this.currentImg=currentImg+1;
            }else{
              this.currentImg=0;
            }
          },this.playTime)

        }
      },

      //点击到下一张轮播图
      clickToGetNextPic(){
        let {currentImg}  = this;
        let length = this.imgArr.length;
        if(currentImg<length-1){
          this.currentImg=currentImg+1;
        }else{
          this.currentImg=0;
        }
        this.initBanner();
      },

      //点击到上一张轮播图
      clickToGetPrePic(){
        let {currentImg}  = this;
        let length = this.imgArr.length;
        if(currentImg>0){
          this.currentImg=currentImg-1;
        }else{
          this.currentImg=length-1;
        }
        this.initBanner();
      },

      //点击到指定轮播图
      clickToPointPic(index){
        this.currentImg = index;
        this.initBanner()
      },

      //将图片读到card2ImgArr中
      stateChangeCard2ImgArr(){
        let imgArr = this.imgArr;
        if(imgArr.length>9){
          this.card2ImgArr = imgArr.slice(0,9);
          this.hideImgNum = imgArr.length - 9;
        }
      },

      //展示card2中所有图片
      clickToShowAllImg(){
         this.showAllImg = true;
        this.card2ImgArr = this.imgArr
      }
    }

  }
</script>


<style lang="scss" scoped>
  .banner-card__wrap{
    .banner-card{
      position:relative;
      height:376*$length;
      width:938*$length;
      background-color: #9989;
      border-radius: 4*$length;
      text-align:center;
      overflow: hidden;
      @extend %flex-column-center;
      &:hover{
        .banner-card__left-arrow{
          transform: rotateY(0);
        }

        .banner-card__right-arrow{
          transform: rotateY(0);
        }
      }
      .banner-card__img{
        display: block;
        height:100%;
        width:auto;
      }
      .banner-card__left-arrow{
        position:absolute;
        top:50%;
        left:0;
        margin-top:-38*$length;
        height:76*$length;
        width:36*$length;
        background-color:rgba(0,0,0,.1) ;
        border-radius:0 10*$length 10*$length 0;
        @extend %flex-column-center;
        > p{
          width:100%;
          height:100%;
          @extend %flex-column-center;
          transform: rotate(180deg);
        }
        transform-origin: left;
        transform: rotateY(-90deg);

        @extend %animate-transition;
        @extend %cursorPointer;

      }
      .banner-card__right-arrow{
        position:absolute;
        top:50%;
        right:0;
        margin-top:-38*$length;
        height:76*$length;
        width:36*$length;
        background-color:rgba(0,0,0,.1) ;
        border-radius:10*$length 0 0 10*$length;
        @extend %flex-column-center;
        @extend %animate-transition;
        @extend %cursorPointer;
        transform-origin: right;

        transform:rotateY(90deg)
      }
      .banner-card__progress{
        position:absolute;
        bottom:16*$length;
        width:100%;
        margin:0 auto;
        @extend %flex-row-center;

        p{
          width:16*$length;
          height:4*$length;
          margin:0 5*$length;
          border-radius:2*$length 2*$length 0 0;
          background-color: rgba(255,255,255,.4);
          @extend %animate-transition;
          @extend %cursorPointer;


          &:hover{
            background-color: rgba(255,255,255,1);

          }
        }
        .banner-card__progress-dot{
          background-color: rgba(255,255,255,1);
        }
      }
    }
    .banner-card2{
      width:768*$length;
      background-color: transparent;
      .banner-card2__bigImg{
        position:relative;
        width:768*$length;
        background-color: #BDBCD1;
        @extend %flex-column-center;
        border-radius:4*$length;
        box-sizing:border-box;

        & img{
          height:auto;
          width:100%;

        }
        &:hover{
          .banner-card__left-arrow{
            transform: rotateY(0);
          }

          .banner-card__right-arrow{
            transform: rotateY(0);
          }
        }
        .banner-card__left-arrow{
          position:absolute;
          top:50%;
          left:0;
          margin-top:-38*$length;
          height:76*$length;
          width:36*$length;
          background-color:rgba(0,0,0,.1) ;
          border-radius:0 10*$length 10*$length 0;
          @extend %flex-column-center;
          > p{
            width:100%;
            height:100%;
            @extend %flex-column-center;
            transform: rotate(180deg);
          }
          transform-origin: left;
          transform: rotateY(-90deg);

          @extend %animate-transition;
          @extend %cursorPointer;

        }
        .banner-card__right-arrow{
          position:absolute;
          top:50%;
          right:0;
          margin-top:-38*$length;
          height:76*$length;
          width:36*$length;
          background-color:rgba(0,0,0,.1) ;
          border-radius:10*$length 0 0 10*$length;
          @extend %flex-column-center;
          @extend %animate-transition;
          @extend %cursorPointer;
          transform-origin: right;

          transform:rotateY(90deg)
        }
      }
      .banner-card2__longBox {
        @extend %inlineBlockV;
        overflow-x: hidden;
        /*white-space: nowrap;*/
        text-align:left;
        box-sizing:border-box;

        .banner-card2__littleImg{
          margin-top:16*$length;

          width:80*$length;
          height:80*$length;
          border:1px solid transparent;
          box-sizing:border-box;
          // background-color: #BDBCD1;
          opacity: .6;
          position:relative;

          border-radius:4*$length;
          margin-right:6*$length;
          display: inline-block;
          @extend %inlineBlockV;
          text-align: center;
          &:hover{
            opacity: 1;
          }

          .hideImgNum{
            box-sizing: border-box;
            position:absolute;
            top:0;
            right:0;
            width:100%;
            background-color: rgba(34,34,34,.3);
            @include fontStyle(16,70,500,#fff,center);
            height:100%;

          }
          & img{
            vertical-align:middle;
            max-height:calc(100% - 5px);
            max-width:calc(100% - 5px);

          }
        }

        .banner-card2__littleImg--active{
          border:1px solid #00AAE6;
          box-sizing:border-box;
          position:relative;
          margin-top:16*$length;

          width:80*$length;
          height:80*$length;
          border-radius:4*$length;
          margin-right:6*$length;
          display: inline-block;
          opacity: 1;
          @extend %inlineBlockV;
          text-align: center;
          .hideImgNum{
            position:absolute;
            top:0;
            right:0;
            width:100%;
            background-color: rgba(34,34,34,.3);
            @include fontStyle(16,70,500,#fff,center);
            height:100%;

          }
          & img{
            vertical-align:middle;

            max-height:calc(100% - 5px);
            max-width:calc(100% - 5px);

          }

        }

      }


      }
  }

</style>
